<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/9/6
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function checkUsername(){
            let username=document.getElementById("username").value;
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                    document.getElementById("mydiv").innerHTML=xhr.responseText;
                }
            };
            //xhr.open("get","${pageContext.request.contextPath}/checkUsername?username="+username);
            //xhr.send(null);


            //当使用post请求，请求头中数据格式默认使用的是text/plain
            // 而对于post请求数据传递的时候，我们需要的是：application/x-www-form-urlencoded
            // 因此，需要手动指定数据传输方式
            // 告知服务器参数为普通文本，请求以request payload传递
            //         ->如果参数格式不是FormData构造器构建的数据，text/plain将作为ajax的请求参数的默认值

            // 告知服务器参数为表单数据格式，请求以FormData传递
            //         ->这类参数必须使用urlendcoded规则参数格式字符串
            //         ->urlendcoded参数格式:查询字符串的格式，参数名=参数值&参数名=参数值
                    // ->传递的参数将以上述格式作为转换依据进行分解

            xhr.open("post","${pageContext.request.contextPath}/checkUsername");
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send("username="+username);

        }
    </script>
</head>
<body>


    用户名:<input type="text"  id="username" onblur="checkUsername()">
    <div id="mydiv">

    </div>


</body>
</html>
